<template>
    <div class="newpassword">
      <div class="password-wrapper">
      <h2 class="password-title">设置新密码</h2>
      <div class="password-cont">
        <div class="password-box margin-b120">
          <img src="../../../../assets/img/icon_password.png" class="iconimg">
            <yd-input slot="right" type="password" v-model="password" placeholder="请输入新密码" class="password"></yd-input>
        </div>
        <div class="password-btn" @click="confirm()">确认</div>
        <div class="blank-btn" @click="blank()">返回登录</div>
      </div>
    </div>
    </div>
</template>

<script>
import apis from '../../../../../static/js/apis.js'
export default {
  components: {
    apis
  },
  data () {
    return {
      password: '',
      phone: ''
    }
  },
  created () {
    this.phone = this.$route.query.phone
  },
  methods: {
    blank () {
      this.$router.push({
        path: '/login'
      })
    },
    confirm () {
      if (this.password === '') {
        this.$dialog.alert({mes: '请填写新密码!'})
      } else {
        let qs = require('querystring')
        this.$axios.post(apis + '/user/changepwd',
          qs.stringify({
            password: this.password,
            username: this.phone
          })
        )
          .then(response => {
            if (response.data.code === 200) {
              this.$dialog.toast({
                mes: '修改成功',
                callback: () => {
                  this.$router.push({
                    path: '/Successfully'
                  })
                }
              })
            } else {
              this.$dialog.alert({mes: '新密码错误!'})
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
}
</script>

<style scoped>
.newpassword{
position: fixed;
top:0;
bottom: 0;
width: 100%;
background: #fff;
}
.password-title{
  font-size: 24px;
  font-weight: bold;
  padding:0 40px;
  margin:145px 0;
}
.password-cont{
  overflow: hidden;
  padding: 0 40px;
}
.password-box{
  width: 100%;
  display: flex;
  height: 40px;
  border-bottom: 1px solid #c4c4c4;
}
.password{
flex:1;
font-size: 14px;
}
.iconimg{
  width: 15px;
  height: 20px;
  margin-right: 10px;
  margin-top: 10px;
}
.margin-b120{
  margin-bottom: 120px;
}
.password-btn{
  width: 100%;
  border-radius: 10px;
  background: #ffd602;
  color:#fff;
  font-size: 15px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 25px;
}
.blank-btn{
   width: 100%;
   color:#ffd602;
   font-size: 12px;
   text-align: center;
}
</style>
